// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
// 引入action
import {createDecrementAction, createIncrementAction,createIncrementAsyncAction} from "../../redux/count_action";
import React, {Component} from 'react';

class Count extends Component {
    //加
    increment = () => {
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    //减
    decrement = () => {
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    //奇数加
    incrementIfOdd = () => {
        const {value} = this.selectNumber
        if(this.props.count%2!==0){
            this.props.jia(value*1)
        }
    }
    //异步加
    incrementAsync = () => {
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1,500)
    }

    render() {
        console.log(this.props.count)
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c=>{this.selectNumber=c}}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button style={{marginLeft:10}} onClick={this.increment}>+</button>
                <button style={{marginLeft:10}} onClick={this.decrement}>-</button>
                <button style={{marginLeft:10}} onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                <button style={{marginLeft:10}} onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}

export default connect(
    //映射状态
    state =>({count:state}),

// 映射操作状态的方法-一般写法
// const mapDispatchToprops = dispatch =>{
//     return {
//         jia:(num)=>{dispatch(createIncrementAction(num))},
//         jian:(num)=>{dispatch(createDecrementAction(num))},
//         jiaAsync:(num,time)=>{dispatch(createIncrementAsyncAction(num,time))},
//     }
// }

// 映射操作状态的方法-简写，直接写action
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction,
    })(Count)

